<template>
	<view class="border-collapse">
		<view class="card has-fixed-bottom">
			<view class="swiper">
				<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
					<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
						<swiper-item v-for="(item, index) in data" :key="index">
							<view class="swiper-item">
								<image :src="item" mode="aspectFill" :draggable="false" />
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<view class="product-head">
				<view class="integral">{{detail.price}}元</view>
				<view class="name">{{detail.name}}</view>
			</view>
			<view class="product-info">
				<view class="product-item">
					<view class="label">库存</view>
					<view>{{detail.quantity}}</view>
				</view>
			</view>
			<view class="product-details">
				<view class="title">商品详情</view>
				<view class="introduction">{{detail.description}}</view>
			</view>
		</view>
		<view class="fixed-bottom-box">
			<button type="warn" @click="exchange">立即购买</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				swiperDotIndex: 0,
				data: [],
				detail: {}
			}
		},
		methods: {
			changeSwiper(e) {
				this.current = e.detail.current
			},
			exchange() {
				uni.navigateTo({
					url:'/pages/mall/confirmOrder?content='+encodeURIComponent(JSON.stringify(this.detail))
				})
			}
		},
		onLoad(e) {
			this.detail = JSON.parse(decodeURIComponent(e.content))
			this.data = new Array(this.detail.imageKey)
		}
	}
</script>

<style lang="scss">
	.swiper-box {
		height: 320rpx;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 320rpx;
		line-height: 320rpx;

		image {
			border-radius: 16rpx;
		}
	}
	.product-head {
		padding: 30rpx;
		border-bottom: 1px solid #D8D8D8;
		font-size: 30rpx;
		.integral {
			font-weight: bold;
			color: #FC0204;
			margin-bottom: 20rpx;
		}
		.name {
			line-height: 40rpx;
		}
	}
	
	.product-info {
		padding: 0 30rpx;
		border-bottom: 1px solid #D8D8D8;
		font-size: 26rpx;
		.product-item {
			padding: 30rpx 0;
			display: flex;
			align-items: center;
			.label {
				width: 4em;
				text-align-last: justify;
				color: #888;
				margin-right: 30rpx;
			}
		}
	}
	
	.product-details {
		padding: 30rpx;
		font-size: 26rpx;
		.title {
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
			display: flex;
			align-items: center;
			&::before {
				content: '';
				width: 6rpx;
				height: 30rpx;
				background-color: #FC0204;
				display: inline-block;
				margin-right: 15rpx;
			}
		}
		.introduction {
			line-height: 46rpx;
		}
	}
</style>
